<template>
  <div class="container">
    <h1 style="text-align: center; margin-bottom: 20px">
      {{ $route.params.id ? "编辑信息" : "新增护工" }}
    </h1>
    <el-form :model="form" label-width="120px" :rules="rules" ref="formRef">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number v-model="form.age" />
      </el-form-item>

      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" />
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <el-upload
          :action="`${baseUrl}/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <div class="avatar-uploader">
            <img
              v-if="form.avatar"
              :src="`${baseUrl}/${form.avatar}`"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { addNurse, getNurseById, updateNurse } from "@/api/request";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const formRef = ref();
const baseUrl = window.config.baseUrl;
const nurseId = router.currentRoute.value.params.id;

const form = ref({
  id: nurseId,
  name: "", // 姓名
  gender: "", // 性别
  age: "", // 年龄
  phone: "", // 电话
  avatar: "", // 头像
});
const rules = ref({
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  gender: [{ required: true, message: "请输入性别", trigger: "blur" }],
  age: [{ required: true, message: "请输入年龄", trigger: "blur" }],

  phone: [
    { required: true, message: "请输入电话", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (
          !/^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
            value
          )
        ) {
          callback(new Error("手机号格式错误"));
        } else {
          callback();
        }
      },
    },
  ],
  avatar: [{ required: true, message: "请上传头像", trigger: "blur" }],
});

const handleAvatarSuccess = (res, file) => {
  form.value.avatar = res.data;
};

const createOrUpdate = async () => {
  if (!form.value.id) {
    await addNurse(form.value);
  } else {
    await updateNurse(form.value);
  }
  ElMessage.success("操作成功");
  router.back();
};

const submit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      await createOrUpdate();
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const getData = async () => {
  if (nurseId) {
    let res = await getNurseById(nurseId);
    form.value = {
      ...res.data,
    };
  }
};
getData();
</script>

<style scoped>
.container {
  max-width: 800px;
}
.avatar-uploader {
  width: 128px;
  height: 128px;
  display: block;
  border: 1px dashed #636363;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
